import React from 'react';
import { Link } from 'react-router';
import SliderWrap from './SliderWrap';
import './home.css';

const Home = props => (
  <div className="home">
    {/* 头部 开始 */}
    {
      props.isEdit ? (
        <header className="title">
          <button
            className="title__btn"
            onClick={() => props.handleEditOperation()}
          >取消</button>
          <button
            className="title__btn"
            onClick={() => props.handleCheckedAll()}
          >全选</button>
        </header>
      ) : (
        <header className="title">
          <div
            className="title__item"
            onClick={() => props.handleSliderWrap(true)}
          >
            <i className="title__item__menu" />
          </div>
          note
          <button
            className="title__btn"
            onClick={() => props.handleEditOperation()}
          >编辑</button>
        </header>)
    }
    {/* 头部 开始 */}

    {/* 列表 开始 */}
    <ul className="list">
      {
        props.lists.map((item, index) => (
          <li key={item.id}>
            <Link className="list__item" to={`/edit?id=${item.id}`}>
              <p className="list__item__content">{item.content}</p>
              <p className="list__item__date">
                {item.Dates}<span>{item.Time}</span>
              </p>
            </Link>
            <i
              className={`list__item__checked${props.isEdit ? ' __active' : ''}${item.checked ? ' __actives' : ''}`}
              onClick={() => props.handleCheckedItem(index)}
            />
          </li>
        ))
      }
    </ul>
    {/* 列表 结束 */}

    <div className={`errorTip${props.lists.length > 0 ? '' : ' __active'}`}>暂无数据</div>

    <Link className={`addBtn${props.isEdit ? ' __active' : ''}`} href="/edit" />

    <footer
      className={`footer${props.isEdit ? '' : ' __active'}`}
      onClick={() => props.handleDelete()}
    >删除</footer>

    {/* 侧边栏 开始*/}
    <SliderWrap
      activeCate={props.activeCate}
      sliderShow={props.sliderShow}
      handleSliderWrap={(event, bool) => {
        const target = event.target.classList.contains('sliderWrap');
        const curtarget = event.currentTarget.classList.contains('wrap__list__item');
        if (target || curtarget) props.handleSliderWrap(bool);
      }}
      handleActiveType={index => props.handleActiveType(index)}
      handleFilter={type => props.handleFilter(type)}
    />
    {/* 侧边栏 结束*/}


  </div>
);

export default Home;
